<script type="text/javascript" src="{$_W['siteroot']}addons/lxy_marry/template/js/swipe.js"></script>
<style>
.box_swipe {overflow: hidden;position: relative;}
.box_swipe ul {overflow: hidden;position: relative;}
.box_swipe ul > li {float:left;width:100%;position: relative;}
.box_swipe>ol{height:20px;position: relative;z-index:10;margin-top:-25px;text-align:right;padding-right:15px;background-color:rgba(0,0,0,0.3);}
.box_swipe>ol>li{display:inline-block;margin:5px 0;width:8px;height:8px;background-color:#757575;border-radius: 8px;}
.box_swipe>ol>li.on{background-color:#ffffff;}
</style>

<div id="banner_box" class="box_swipe">
	<ul>
	{loop $hslists $v}
		<li>
			<img src="{php echo tomedia($v);}" title="{$item['title']}" style="width:100%;" />
		</li>
	{/loop}
	</ul>
	<ol>
	{php $slideNum = 1;}
	{loop $hslists $vv}
		<li{if $slideNum == 1} class="on"{/if}></li>
		{php $slideNum++;}
	{/loop}
	</ol>
</div>

<script type="text/javascript">
	$(function() {
		new Swipe($('#banner_box')[0], {
			speed:500,
			auto:3000,
			callback: function(){
				var lis = $(this.element).next("ol").children();
				lis.removeClass("on").eq(this.index).addClass("on");
			}
		});
	});
</script>